import { useState } from "react";
import { BillButton } from "./UI/BillButton";
import s from "./styles.module.scss";
import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
import AutoFixNormalIcon from "@mui/icons-material/AutoFixNormal";
import ThumbUpOffAltIcon from "@mui/icons-material/ThumbUpOffAlt";
import { Box, Modal, Typography } from "@mui/material";
import {
  useLazyGetAdviceQuery,
  useLazyGetStrategyQuery,
  useLazyGetSurpiseQuery,
} from "../api/invest";
import { Loader } from "./UI/loader";
import { COLORS, recommendations, style } from "../data/data";
import { getSession } from "../session";
import { checkPaperPosition, getRisk } from "../helpers/functions";
import { PieChart, Pie, Tooltip, Cell } from "recharts";

export const Bill = ({ totalAmount, expected }) => {
  const [openSurprise, setOpenSurprise] = useState(false);
  const [openStrategy, setOpenStrategy] = useState(false);
  const [openAdvice, setOpenAdvice] = useState(false);

  const [data, setData] = useState(null);
  const [dataMap, setDataMap] = useState(null);

  const [getSurprise, { isLoading: loadSurprise, isError: errorSurprise }] =
    useLazyGetSurpiseQuery();
  const [getStrategy, { isLoading: loadStrategy, isError: errorStrategy }] =
    useLazyGetStrategyQuery();
  const [getAdvice, { isLoading, isError }] = useLazyGetAdviceQuery();

  const handleOpenSurprise = async () => {
    try {
      setOpenSurprise(true);
      const response = await getSurprise();
      setData(response.data);
    } catch (error) {
      console.error("Error fetching surprise:", error);
    }
  };

  const handleOpenAdvice = async () => {
    try {
      setOpenAdvice(true);
      const response = await getAdvice(getSession().portfolioId);
      setDataMap(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const handleOpenStrategy = async () => {
    try {
      setOpenStrategy(true);
      const response = await getStrategy(getSession().portfolioId);
      setData(response.data);
    } catch (e) {
      console.error(e);
    }
  };

  const handleCloseSurprise = () => {
    setOpenSurprise(false);
    setData(null);
  };

  const handleCloseStrategy = () => {
    setOpenStrategy(false);
    setData(null);
  };

  const handleCloseAdvice = () => {
    setOpenAdvice(false);
    setDataMap(null);
  };

  return (
    <div className={s.bill}>
      <div className={s.bill__title}>Полная стоимость портфеля</div>

      <div className={s.bill__info}>
        <div>
          <div className={s.bill__info__curr}>{totalAmount} руб.</div>

          <div className={s.bill__info__expect}>
            Доходность за все время: <span>{expected}%</span>
          </div>
        </div>
      </div>

      <ul className={s.bill__list}>
        <li>
          <Modal
            open={openSurprise}
            onClose={handleCloseSurprise}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
          >
            <Box sx={style}>
              {data ? (
                <>
                  <div className={s.bill__surprise__name}>{data?.name}</div>
                  <div className={s.bill__surprise__sector}>
                    Сектор {data?.sector}
                  </div>
                  <a
                    href={`https://www.tinkoff.ru/invest/stocks/${data?.ticker}`}
                    target="blank"
                    className={s.bill__surprise__link}
                  >
                    Купить
                  </a>
                </>
              ) : (
                <>
                  <div>Подбираем акцию....</div>
                  <Loader width={"50px"} height={"50px"} />
                </>
              )}
            </Box>
          </Modal>

          <BillButton onClickHandler={() => handleOpenSurprise()}>
            <QuestionMarkIcon />
            <div>Удиви меня</div>
          </BillButton>
        </li>

        <li>
          <Modal
            open={openStrategy}
            onClose={handleCloseStrategy}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
          >
            <Box sx={{ ...style, textAlign: "left" }}>
              {data ? (
                <>
                  <div className={s.bill__strategy__count}>
                    Количество активов в портфеле:{" "}
                    <span>{data?.countPapers}</span>
                  </div>

                  <div className={s.bill__strategy__div}>
                    <div>Коэффициент диверсификации:</div>
                    <div>{data.result?.toFixed(2)}</div>
                  </div>

                  <div className={s.bill__strategy__risk}>
                    Ваш риск: {getRisk(data?.result)}
                  </div>

                  <div className={s.bill__strategy__info}>
                    Диверсификация высчитывается по энтропии Янгера
                    <br />
                    Максимальное значение – ноль, достигается при условии, что
                    все доли равны.
                    <br />
                    Чем больше различие между весами долей, тем меньше (меньше
                    нуля) значение энтропии Ягера и портфель считается менее
                    диверсифицированным.
                  </div>
                </>
              ) : (
                <div style={{ textAlign: "center" }}>
                  <div>Высчитываем диверсификацию....</div>
                  <Loader width={"50px"} height={"50px"} />
                </div>
              )}
            </Box>
          </Modal>
          <BillButton onClickHandler={() => handleOpenStrategy()}>
            <AutoFixNormalIcon />
            <div>Стратегия портфеля</div>
          </BillButton>
        </li>

        <li>
          <Modal
            open={openAdvice}
            onClose={handleCloseAdvice}
            aria-labelledby="modal-modal-title"
            aria-describedby="modal-modal-description"
            sx={{ overflow: "hidden" }}
          >
            <Box sx={{ ...style, textAlign: "left", height: "600px" }}>
              {dataMap ? (
                <>
                  <div className={s.bill__advice__title}>Рекомендации</div>
                  <div className={s.bill__advice__undertitle}>
                    Статистика портфеля:{" "}
                  </div>
                  <PieChart width={300} height={200}>
                    <Pie
                      dataKey="value"
                      data={dataMap}
                      cx={200}
                      labelLine={false}
                      cy={100}
                      innerRadius={40}
                      outerRadius={80}
                      fill="#E55C78"
                    >
                      {dataMap.map((entry, index) => (
                        <Cell
                          key={`cell-${index}`}
                          fill={COLORS[index % COLORS.length]}
                        />
                      ))}
                    </Pie>
                    <Tooltip />
                  </PieChart>

                  <p>{recommendations[checkPaperPosition(dataMap)]}</p>

                  <div className={s.bill__advice__titlelist}>Однако: </div>

                  <ol className={s.bill__advice__list}>
                    <li>
                      Если у вас цель заработать больше денег, получить огромную
                      прибыль в краткорочной перспективе, то стоит купить{" "}
                      <b>акции</b>
                    </li>
                    <li>
                      Если вы хотите сохранить деньги от инфляции или копите на
                      что-то, присмотритесь к <b>долгосрочным облигациям</b>{" "}
                      компаний с хорошим кредитным рейтингом.
                    </li>
                    <li>
                      Если вы хотите накопить деньги и новичок в инвестициях,
                      стоит присмотреться к{" "}
                      <b>фондам Тинькофф вечный портфель.</b>{" "}
                    </li>
                    <li>
                      Не стоит хранить много валюты в портфеле, есть риск
                      потерять деньги из-за инфляции
                    </li>
                  </ol>
                </>
              ) : (
                <>
                  <div>Считаем....</div>
                  <Loader width={"50px"} height={"50px"} />
                </>
              )}
            </Box>
          </Modal>
          <BillButton onClickHandler={() => handleOpenAdvice()}>
            <ThumbUpOffAltIcon />
            <div>Рекомендации</div>
          </BillButton>
        </li>
      </ul>
    </div>
  );
};
